<template>
  <div class="xq-form-wrapper p24">
    <!-------------------------------------------- 搜索区域start -------------------------------------------->
    <div class="xq-form-search">
      <XqFormBuild
        ref="searchForm"
        mode="search"
        :dataSource="{}"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['search']"
      />
      <div style="text-align: right">
        <a-space>
          <a-button type="primary" @click="filterRecord">搜索</a-button>
          <a-button type="default" @click="resetRecord">重置</a-button>
        </a-space>
      </div>
    </div>
    <!-------------------------------------------- 搜索区域end -------------------------------------------->
    <!-------------------------------------------- 删除添加按钮区域start -------------------------------------------->
    <div class="xq-form-main">
      <div class="xq-form-action">
        <a-space class="xq-form-action-left">
          <a-button type="primary" @click="showCreateModal">添加</a-button>
          <a-button :disabled="selectedRowKeys.length <= 0" type="primary" @click="deleteBatchRecord">批量删除</a-button>
        </a-space>
      </div>
      <!-------------------------------------------- 删除添加按钮区域end -------------------------------------------->
      <!-------------------------------------------- 表格区域区域start -------------------------------------------->
      <a-spin :spinning="spinning" class="xq-form-content">
        <XqTable
          :scroll="{ x: columns.length * 150 }"
          :pagination="pagination"
          :customize="FormJson['config']['table']['customize']"
          :dataSource="tableData"
          :columns="columns"
          :rowSelection="
            FormJson['config']['table']['extend']['batch']
              ? {
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }
              : null
          "
          class="xq-form-content-table"
          @change="onTableChange"
        >
          <!--------------------------------------------主要内容，表格，自定义 header -------------------------------------------->
          <template v-for="(col, index) in columns" #[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-------------------------------------------- 主要内容，表格，自定义 td -------------------------------------------->
          <template v-for="(col, index) in columns" #[col.dataIndex]="text, record">
            <!-------------------------------------------- 主操作列区域start -------------------------------------------->
            <span v-if="col.dataIndex === 'tableAction'" :key="index">
              <template v-if="record.type === 1 && record.zfbPid">
                <a @click="goZfbAuth(record)">去授权</a>
                <a-divider type="vertical" />
              </template>
              <a @click="showUpdateModal(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm :title="`确认要删除记录吗？`" okText="确认" cancelText="取消" @confirm="deleteRecord(record)">
                <a>删除</a>
              </a-popconfirm>
            </span>
            <!-------------------------------------------- 主操作列区域end -------------------------------------------->
            <!-------------------------------------------- 枚举值转换start -------------------------------------------->
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
            <!-------------------------------------------- 枚举值转换end -------------------------------------------->
          </template>
        </XqTable>
        <!-------------------------------------------- 分页区域start -------------------------------------------->
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="currentPage"
            :pageSize="pageSize"
            :total="total"
            :showSizeChanger="true"
            :showQuickJumper="true"
            :pageSizeOptions="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
        <!-------------------------------------------- 分页区域区域end -------------------------------------------->
      </a-spin>
    </div>
    <!-------------------------------------------- 表格区域end -------------------------------------------->
    <!-------------------------------------------- 添加对话框区域start -------------------------------------------->
    <a-modal :pagination="false" v-model="createModalVisible" :maskClosable="false" :destroyOnClose="true" title="添加" :width="500">
      <XqFormBuild
        ref="createForm"
        :dataSource="{}"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['create']"
      />
      <XqModalFooter slot="footer" @cancel="createCancel" @ok="createOk" />
    </a-modal>
    <!-------------------------------------------- 添加对话框区域end -------------------------------------------->
    <!-------------------------------------------- 编辑对话框区域start -------------------------------------------->
    <a-modal v-model="updateModalVisible" :maskClosable="false" :destroyOnClose="true" title="编辑" :width="500">
      <XqFormBuild
        ref="updateForm"
        :dataSource="tempRecord"
        :dynamicData="dynamicData"
        :formFields="FormJson['fields']"
        :formValidators="FormJson['validators']"
        :formConfig="FormJson['config']['update']"
      />
      <XqModalFooter slot="footer" @cancel="updateCancel" @ok="updateOk" />
    </a-modal>
    <!-------------------------------------------- 编辑对话框区域end -------------------------------------------->
  </div>
</template>
<script>
import FormJson from "./FormJson"; // 引入FormJson数据
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { retrieveReq, createReq, deleteReq, deleteBatchReq, updateReq } from "./api"; // 引入接口文件

const curdMixin = new XqCurdMixin({
  createReq,
  retrieveReq,
  updateReq,
  deleteReq,
  deleteBatchReq,
  FormJson,
  tableConfigKey: "table"
});

export default {
  name: "",
  components: {},
  mixins: [curdMixin],
  data() {
    return {
      pageSize: 20
    };
  },
  computed: {
    retrieveParams() {
      return {
        request: {}
      };
    },
    createParams() {
      return {};
    },
    updateParams() {
      return {};
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goZfbAuth(record) {
      this.$request({
        url: `/hr/api/v1/transferAccountsBatches/returnAuthorizationUrl`,
        method: "get"
      })
        .then((res) => {
          localStorage.setItem("zfbPid", record.zfbPid);
          if (res.code === 200) {
            window.open(res.data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatValues(values) {
      return values;
    },
    formatDataSource(record) {
      return record;
    }
  }
};
</script>
